<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<title>告警-GIS地图</title>

		<link rel="stylesheet" href="../../css/s_plus.css" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/layout.css" />
		<link rel="stylesheet" href="../../css/choice.css" />
		<!--<link rel="stylesheet" href="../../css/hui.css" />-->

		<script type="text/javascript" src="../../libs/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>
		<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
		<script type="text/javascript" src="../../js/s_plus.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
		<!--<script type="text/javascript" src="../../js/control/mescroll/mescroll.min.js"></script>-->
		<!--<link rel="stylesheet" href="../../js/control/mescroll/mescroll.min.css" />-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>
		<!--<script type="text/javascript" src="../work/menu.js?time=22"></script>-->

		<style>
			/*隐藏百度地图 底部LOGO*/
			
			.BMap_cpyCtrl {
				display: none;
			}
			
			.anchorBL {
				display: none;
			}
		</style>
	</head>

	<body>
		<section id="wrapper" class="wrapper">
			<section class="pusher">
				<section class="sidenav sidebtn">
					<!--侧边栏-->

				</section>
				<section class="mainbody">
					<!--正文-->
					<header class="f_l maxbox header">
						<a class="side_arrow f_l arrow_l" data-effect="sidebtn"><i class="iconfont">&#xe600;</i></a>
						<h1 class="f_l">
          <a class="cur" >
            <i   class="iconfont">&#xe608;</i>
            <b>GIS地图</b>
          </a>
          <a @click="alermList">
            <i class="iconfont">&#xe61f;</i>
            <b>最新告警</b>
          </a>
        </h1>
			
					</header>
					<section class="f_l maxbox map">
						<!--<div class="f_l searchbar">
          <input class="search_key" name="" type="text" placeholder="请输入关键字">
          <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
        </div>-->
						<!--<img src="../../images/map.jpg">-->

						<div id="allmap" style="width: 100%;"></div>

					</section>
					<section class="f_l maxbox work_list" style="display: none;">
						<dl>
							<a @click="go(zd.id)">
								<dt>
              <!--<i class="iconfont bg_red">&#xe60f;</i>-->
              <b>终端信息</b>
            </dt>
								<dd class="txt_list">
									<p><em>终端ID：</em>{{zd.id}}</p>
									<p><em>经度: </em>{{zd.lng}}</p>
									<p><em>纬度: </em>{{zd.lat}}</p>

							</dd>
							</a>
						</dl>
					</section>
				</section>
			</section>
		</section>

		<script>
		

				//动态插入公用菜单JS
				var menuJsPath = "../work/menu.js?time=";
				var randomh = Math.random();
				var e = document.getElementsByTagName("script")[0];
				var d = document.createElement("script");
				d.src = menuJsPath + randomh + "";
				d.type = "text/javascript";
				d.async = true;
				d.defer = true;
				e.parentNode.insertBefore(d, e);

				var head = $(".header").height();
				var foot = $(".work_list").height();
				var pageHeight = $(document).height();
				var mapHeight = pageHeight - (head + foot);
				$("#allmap").height(pageHeight - head);

				console.log("head-" + head + "  foot--" + foot + "  pageHeight-" + pageHeight);
				//				alert('22');

				var sp = new Vue({
					el: "#wrapper",
					data: {
						zd: {},
						lists: [],
						paramId: "",
						marks: []
					},
					methods: {
						go: function(paramId) {
							var zdCode = paramId;
							//							localStorage.setItem("zdCode", zdCode);
							//							hui.open("alerm_show.html", {}, true, {});

							var cell = new Object();
							cell.TERMIMAL_CODE = paramId;
							localStorage.setItem("cell", JSON.stringify(cell));
							hui.open("/modules/terminal/terminal_show.html", {}, true, {});

						},

						showStatus: function(status) {

							if(status == '0') {
								return "无告警	";
							} else if(status == '1') {
								return "一般告警";
							} else if(status == '2') {
								return "严重告警";
							} else {
								return "工单处理";

							}
						},

						alermList: function() {
							hui.open("alarm_list.html?time=" + apiManage.getNow(), {}, true, {});
						},
						gisMap: function() {
							hui.open("alerm_map.html", {}, true, {});
						}
					}
				});

				// 百度地图API功能
				var map = new BMap.Map("allmap");
				var point = new BMap.Point(112.9453203518, 28.2340227593);
				map.centerAndZoom(point, 12);
				map.enableScrollWheelZoom(false);
				
				//标记
				function addMarker(cell) {
//					console.log("经纬度:" + cell.lng + "  " + cell.lat);
var iconUrl="";
				if(cell.status=='1'){
						iconUrl="../../images/danger01.png";
					}
					else if(cell.status==='2'){
						iconUrl="../../images/danger02.png";
					}
					else if(cell.status==='3'){
						iconUrl="../../images/danger04.png";


					}
					else{
//						iconUrl=img_path+"danger0.png";
						iconUrl="../../images/danger0.png";


					}


					var point = new BMap.Point(cell.lng, cell.lat);
					var myIcon = new BMap.Icon(iconUrl, new BMap.Size(22, 30));
					var mk = new BMap.Marker(point, {
						icon: myIcon
					});
					//					var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
					//					mk.setLabel(label);

					mk.addEventListener("click", attribute);

					map.addOverlay(mk); //标出所在地
					//					map.panTo(point); //地图中心移动
					function attribute() {
						$(".work_list").show();
						console.log(JSON.stringify(cell));
						sp.zd = cell;
					}

				}

				loadData();
				//告警统计
				function loadData() {
					//				alert('2234234324234');
					var custId = apiManage.getCompanyId();
					var path = urlManager.getAlarmtj() + "?cusId=" + custId + "&regionId=94f61967ea1e41a88450cce003e7acdf";
					var username = localStorage.getItem("username");
					var sec = localStorage.getItem("sec_pwd");
					var time = apiManage.getNow();
					var key = "loginName=" + username + "&passWord=" + sec + "&time=" + time;

					console.log("告警统计 params--" + key);
					var paramKey = hex_md5(key);

					var jsonParam = JSON.stringify({
						loginName: username,
						time: time,
						sign: paramKey
					});
					console.log("jsonParam:  " + jsonParam);
					console.log("path--" + path);

					$.ajax({
						type: "GET",
						url: path,
						beforeSend: function(request) {
							request.setRequestHeader("loginName", username);
							request.setRequestHeader("time", time);
							request.setRequestHeader("sign", paramKey);
							request.setRequestHeader("Content-Type", "application/text");

						},
						success: function(result) {
							console.log("告警统计:" + JSON.stringify(result));
							//		          		 var datas=result;
							//						var zdList=datas;
							sp.lists = result;
							if(result != null && result.length > 0) {
								firstPoints();

							}
						}

					});

				}

				// 清除所有标记点
				function remove() {

					//	    	pointArray.length=0;
					var overlays = map.getOverlays();

					for(var i = 0; i < overlays.length; i++) {
						map.removeOverlay(overlays[i]);
					}
					overlays.length = 0;

				}

				// 设置坐标
				function settingMarks() {

					var vm = sp;

					if(vm.marks != null && vm.marks.length > 0) {
						//	    	pointArray.length=0;

						for(var i = 0; i < vm.marks.length; i++) {
							var ready = vm.marks[i];

							var cell = new Object();
							cell.lat = ready.LATITUDE;
							cell.lng = ready.LONGITUDE;
							cell.status = ready.STATUS;

							// 准备给画框统计
							//				pointArray.push(cell);
							// cell.title=ready.TERMIMAL_CODE;
							cell.id = ready.TERMIMAL_CODE;
							cell.type = ready.SEVERITY;

							addMarker(cell);
							if(i == vm.marks.length - 1) {
								var point = new BMap.Point(cell.lng, cell.lat);
								//								map.centerAndZoom(point, 13); // 初始化中心点,缩放等级

								//								var point = new BMap.Point(112.9453203518, 28.2340227593);
								//								map.panTo(point);

								map.centerAndZoom(point, 12);

							}
						}
					}

				}

				//统计详情
				function loadDetail(pid) {
					remove();
					var username = localStorage.getItem("username");
					var sec = localStorage.getItem("sec_pwd");
					var time = apiManage.getNow();
					var key = "loginName=" + username + "&passWord=" + sec + "&time=" + time;
					//			  		console.log("key:  "+key);

					var companyId = apiManage.getCompanyId();
					var path = urlManager.getTerminalinfo() + "?cusId=" + companyId + "&regionId=" + pid;
					//				   console.log("path:  "+path);
					var paramKey = hex_md5(key);

					$.ajax({
						type: "GET",
						url: path,
						beforeSend: function(request) {
							request.setRequestHeader("loginName", username);
							request.setRequestHeader("time", time);
							request.setRequestHeader("sign", paramKey);
							request.setRequestHeader("Content-Type", "application/text");

						},
						success: function(result) {
							console.log("告警统计详情:" + JSON.stringify(result));
							sp.marks = result.list;
							settingMarks();
						}

					});

				}

				// 分区统计 （长沙市的五区）
				// 岳麓 28.2418910000,112.9355530000 开福28.2609830000,112.9927570000 雨花
				// 28.1402660000,113.0439250000
				// 天心 28.1183490000,112.9953440000 望城 28.3673230000,112.8245940000
				function firstPoints() {
					//	    	remove();
					var point1 = new BMap.Point(112.9355530000, 28.2418910000); // 岳麓区
					var point2 = new BMap.Point(112.9927570000, 28.2609830000); // 开福区
					var point3 = new BMap.Point(113.0439250000, 28.1402660000); // 雨花区
					var point4 = new BMap.Point(112.9953440000, 28.1183490000); // 天心区
					var point5 = new BMap.Point(113.0846710000, 28.2572280000); // 长沙县
					var point6 = new BMap.Point(113.0394060000, 28.1919130000); // 芙蓉区
					var point7 = new BMap.Point(112.5429710000, 28.2784620000); // 宁乡县

					if(sp.lists != null && sp.lists.length > 0) {
						for(var i = 0; i < sp.lists.length; i++) {
							var cell = sp.lists[i];
							var alarmNum = cell.alarmNum;
							var terminalNum = cell.terminalNum;
							var regionId = cell.regionId;

							if(cell.regionName == '芙蓉区') {
								//						alert('芙蓉区');
								addMarkerByIcon('芙蓉区 <br> 告警(' + alarmNum + ")<br> 终端(" + terminalNum + ")", point6, regionId);
							} else if(cell.regionName == '雨花区') {
								addMarkerByIcon('雨花区<br>告警(' + alarmNum + ")<br>终端(" + terminalNum + ")", point3, regionId);
							} else if(cell.regionName == '岳麓区') {
								addMarkerByIcon('岳麓区 <br>告警(' + alarmNum + ")<br>终端(" + terminalNum + ")", point1, regionId);
							} else if(cell.regionName == '天心区') {
								addMarkerByIcon('天心区 <br> 告警(' + alarmNum + ")<br>终端" + terminalNum, point4, regionId);
							} else if(cell.regionName == '开福区') {
								addMarkerByIcon('开福区<br>告警(' + alarmNum + ")<br>终端(" + terminalNum, point2 + ")", regionId);
							} else if(cell.regionName == '宁乡县') {
								addMarkerByIcon('宁乡县<br> 告警(' + alarmNum + ")<br>终端" + terminalNum, point7 + ")", regionId);
							} else if(cell.regionName == '长沙县') {
								addMarkerByIcon('长沙县<br> 告警' + alarmNum + ")<br>终端" + terminalNum + ")", point5, regionId);
							} else {}
						}

					} else {
						// alert('数据为空');
						addMarkerByIcon("芙蓉区 <br> 告警(0)<br> 终端(0)", point6, regionId);
						addMarkerByIcon("雨花区<br>告警(0)<br>终端(0)", point3, regionId);
						addMarkerByIcon("岳麓区 <br>告警(0)<br>终端(0)", point1, regionId);
						addMarkerByIcon("天心区 <br> 告警(0)<br>终端(0)", point4, regionId);
						addMarkerByIcon("开福区<br>告警(0)<br>终端(0)", point2, regionId);

						// addMarkerByIcon('宁乡县 告警'+alarmNum+"
						// 终端"+terminalNum,point7,regionId);

						// addMarkerByIcon('长沙县 告警'+alarmNum+"
						// 终端"+terminalNum,point5,regionId);

					}

				}

				// 创建标注 可自定义图标
				function addMarkerByIcon(title, point, pid) {

					// var iconUrl = "http://lbsyun.baidu.com/jsdemo/img/fox.gif";
					var iconUrl = "../../images/circle2.png";

					var myIcon = new BMap.Icon(iconUrl, new BMap.Size(140, 140));

					var marker = new BMap.Marker(point, {
						icon: myIcon
					});
					var label = new BMap.Label(title, {
						offset: new BMap.Size(8, 5)
					});

					label.setStyle({
						// width: "120px",
						// height: "52px",
						　　
						color: "white", // 字体颜色
						　　fontSize: "10px", // 字体大小
						　　backgroundColor: "0.05", // 文本标注背景颜色
						　　border: "0"　　 // fontWeight :"bold" //字体加粗

					});
					marker.setLabel(label);
					marker.addEventListener("click", attribute);
					map.addOverlay(marker);

					function attribute() {
						// remove();
						var p = marker.getPosition(); // 获取marker的位置
						// alert("marker的位置是" + p.lng + "," + p.lat);

						map.centerAndZoom(point, 13); // 初始化中心点,缩放等级
						// randomPoints();

						//				hideMenu();
						//				remove();
						loadDetail(pid);

						// console.log("marker的位置是" + p.lng + "," + p.lat);
					}

				}

		</script>

	
	</body>

</html>

	<!--侧边栏向左移动效果*该放在head无效-->
		<script src="../../js/modernizr.custom.js"></script>
		<script src="../../js/classie.js"></script>
		<script src="../../js/sidebarEffects.js"></script>